<template>
    <div style="margin-top: 0px;margin-right: 5px;">
    <template>

        <el-table
          :data="tableData"
          height="65vh"
          border
          style="width: 100%;"
         >
         <template>
          <el-table-column
            prop="requesttime"
            label="请求时间"
            width="180"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="请求人"
            :width=widthlist>
          </el-table-column>
          <el-table-column
          label="请求信息"
          prop="content"
          :width=widthlist
          :show-overflow-tooltip="true">
         
        </el-table-column>
          <el-table-column
          prop="phone"
          label="请求人电话"
          :width=widthlist>
        </el-table-column>
        <el-table-column
        prop="assigntime"
        label="指派时间"
        width="180"
        v-if="idnum!=1"
       >
      </el-table-column>
      <el-table-column
      prop="completetime"
      label="完成时间"
      width="180"
      v-if="idnum==4"
     >
    </el-table-column>

    <!-- ------------------------------------- -->
    <!-- 这个是具体的房屋信息 比如那个房屋的维修 -->
    <el-table-column
    prop="address"
    label="请求具体地址"
    :width=widthlist
   >
  </el-table-column>
  
</el-table-column>

<el-table-column
label="指派员工"
:width=widthlist
v-if="idnum!=1"
>
<template slot-scope="scope">
 
  <el-tooltip class="item" effect="dark" content="查看个人信息" placement="top">
    <!-- 使用 {{scope.row.staff.name}} 是从接口里面调取可能存在异步的(没有值的情况 所以要使用v-if判断是否有值)-->
    <el-link @click="staffallinfo(scope.row.staff)" v-if="scope.row.staff">{{scope.row.staff.name}}</el-link>
  </el-tooltip>

</template>

</el-table-column>
</el-table-column> 
       <el-table-column
        label="状态"
        :width=widthlist>
        <template>
            <div v-if="idnum==1">
                未指派
            </div>
            <div v-if="idnum==2">
                未接受
            </div>
            <div v-if="idnum==3">
                处理中
            </div>
            <div v-if="idnum==4">
                已完成
            </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="idnum==1">
        <template slot-scope="scope">
      
            <el-button
            size="mini"
            type="danger"
            @click="handleEdit(scope.$index, scope.row)"
            >指派</el-button>
            <span>
            </span>
            <!-- <el-dropdown-menu slot="dropdown">
              <template v-for="(item,index) in stafflistinfo">
                <el-dropdown-item  @click.native="chatWithEspUser(scope.row,item)">{{item.name}}</el-dropdown-item>
              </template>
              
            </el-dropdown-menu> -->
          
        </template>


      </el-table-column>

    </template>
   
        </el-table>
      </template>




      <!-- 员工具体信息信息模态框 -->
      <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="form.gender" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" :label-width="formLabelWidth">
            <el-input v-model="form.idcard" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="入职时间" :label-width="formLabelWidth">
            <el-input v-model="form.entryTime" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <el-input v-model="form.post" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
        
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </el-dialog>


      <!-- 指派的模态框 -->
      <el-dialog title="指派人员" :visible.sync="dialogFormVisible2">
        <el-form>
        
          <el-form-item label="指派人员" :label-width="formLabelWidth">
            <el-select v-model="userstaff" placeholder="请选择需要指派的人员">
              <template v-for="(item,index) in stafflistinfo">
                <el-option :label="item.name" :value="item.id"></el-option>
              </template>
              
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="chatWithEspUser(userstaff)">确 定</el-button>
        </div>
      </el-dialog>


      <el-pagination
  background
  layout="prev, pager, next"
  :page-size="7"
  :total="100"
  @current-change="currenteven">
</el-pagination>
    </div>
  </template>
  <script>
 
     export default{
   
      data(){
        return{
            idnum:1,
            tableData: [],
            widthlist:"120",
            stafflistinfo:[],
            dialogFormVisible:false,
            form:{"name":"zhangsan"},
            formLabelWidth:"150px",
            //选择指派员工的信息
            userstaff:{},
            //准配指派的那条请求列表
            selectqustlist:"",
            dialogFormVisible2:false

           
        }
      },


  created(){
   
    // 因为刚进页面的时候 会处理没有参数的 所有要给一个默认的值 
    if(!this.$route.params.id){
      console.log("没有参数 默认值为this.idnum=1")
      this.idnum=1
    }else{
      this.idnum=this.$route.params.id
    }
    
    this.listinfo(this.idnum)

    console.log("这是页面跳转转过来的id"+ this.$route.params.id)
     this.stafflist()

  },


  
      methods:{
        // 查看员工的具体信息
        staffallinfo(staff){
          
       this.dialogFormVisible=true
          console.log("999999999")
          console.log(staff)

          var list={}
          list.name=staff.name ,
          list.phone=staff.phone,
          list.idcard=staff.idcard ,
          list.post=staff.post.pname,
          list.address=staff.address,
          list.gender= staff.gender,
          list.entryTime= staff.entryTime
      
          this.form=list
        },

          //  维修员工的列表
           stafflist(){
            console.log("员工列表的查询")
            this.axios({
             url:this.$api+'/staff/selectByPostId', 
             dataType:"json",
            method:'get',
            params:{
             
            }  
          }).then(res=>{
            var list=[]
          for(var i=0;i<res.data.length;i++){
                var item={}
                item["id"]=res.data[i].sid
                item["name"]=res.data[i].name
                list.push(item)
          }
         this.stafflistinfo=list
        //  console.log(this.stafflistinfo)
          }).catch(res=>{
           console.log(res)
          })

     

           },
        

    
        listinfo(id){
       console.log("这是调接口的id" +id)

            this.axios({
             url:this.$api+'/repairorder/selectByStatus', 
             dataType:"json",
            method:'get',
            params:{
              statusId:id
            }  
          }).then(res=>{
            console.log("列表接口信息")
            console.log(res)
    var listinfo=[];    
            
  for(var i=0;i<res.data.length;i++){
    var item=res.data[i]
    var list={};

    list["assigntime"]=item.assigntime;
    list["completetime"]=item.completetime
    list["id"]=item.id
    list["content"]=item.maintainrequest.content
    list["houserinfolist"]=item.maintainrequest.houseinfo
    // 这条就是房屋地址的展示 全部信息在houserinfolist 但是因为有一个要展示的所有把这个页面挑出来
    // 这个是地址的一个是详情信息 一个是具体信息
    if(item.maintainrequest.address){
      list["address"]=item.maintainrequest.address
    }else{
      list["address"]=item.maintainrequest.houseinfo.build+"号楼"+item.maintainrequest.houseinfo.floor+"层"+
    item.maintainrequest.houseinfo.door+"门"
    }
  
    list["name"]=item.maintainrequest.name
    list["phone"]=item.maintainrequest.phone
    list["statuid"]=item.maintainstatus.status
    // 本条记录的id
    list["requestId"]=item.requestId
    // 指派人的id
    list["staffId"]=item.staffId
    
    list["staff"]=item.staff
    list["requesttime"]=item.maintainrequest.requesttime

    listinfo.push(list)
  }

  this.tableData=listinfo
 

    
        
           }).catch(res=>{
           console.log(res)
          })
      },
            
        currenteven(e){
            console.log(e)
        },
       
         //指派按钮
        handleEdit(val,val2){
           console.log("指派的事件")
          console.log(val)
          console.log(val2)
          this.dialogFormVisible2=true
          this.selectqustlist=val2

        },
        // 下拉框的
        chatWithEspUser(val2){
   
          console.log(val2)
          var staffId=val2
   let time = new Date()
   let nowTime = this.timestampToTime(time.toLocaleString('en-US',{hour12: false}).split(" "))

   this.$confirm('是否确认指派', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '提交',
          cancelButtonText: '取消'
        }).then(()=>{
          // Integer id, Integer staffId, String assigntime, Integer statusId, String completetime
          this.axios({
             url:this.$api+'/repairorder/updateStatus', 
             dataType:"json",
            method:'get',
            params:{
              id:this.selectqustlist.id,
              staffId:staffId,
              assigntime:nowTime,
              statusId:2,
              completetime:""
            }  
          }).then((res)=>{
            if(res.data.code>0){
              this.$message({
          message: '指派成功',
          type: 'success'
             });
             this.dialogFormVisible2=false
         this.listinfo(1)
            }

            console.log(res)

          
          }).catch((res)=>{
         console.log(res)
          })


        }).catch(()=>{})





        },



        // 转化时间格式
 timestampToTime(times) {
    let time = times[1]
    let mdy = times[0]
    mdy = mdy.split('/')
    let month = parseInt(mdy[0]);
    let day = parseInt(mdy[1]);
    let year = parseInt(mdy[2])
    //打印结果为：2022-8-31 11:08:34
    return year + '-' + month + '-' + day + ' ' + time
}


  
      }
     }
  </script>
  <style>
 


  </style>